<template>
  <div id="app">
    <el-container>
      <!-- 头部区域 -->
      <el-header class="header">
        <!-- 这里放置头部内容 -->
       <global-header></global-header>
      </el-header>

      <!-- 主体区域 -->
      <el-main>
        <!-- 这里放置主体内容 -->
        <div class="main-content">
          <router-view />
        </div>
      </el-main>
    </el-container>

    <!-- 底部区域 -->
    <el-footer class="footer">
      <!-- 这里放置底部内容 -->
      <a href="https://liugiegie.xyz" target="_blank">
        by Maifuyangluo
      </a>    </el-footer>
  </div>
</template>

<style>
#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
//大坑
body {
  margin: 0 !important;
}
.el-container {
  flex: 1;
  overflow-y: auto; /* 使用 auto 而不是 hidden */
}
.header {
  margin-bottom: 16px;
  box-shadow: #eee 1px 1px 5px;
}
.main-content {
  background: linear-gradient(to right, #fefefe, #fff);
  margin-bottom: 16px;
  padding: 20px;
  box-sizing: border-box; /* 确保内边距不会撑大元素 */
}
.footer {
  background: #efefef;
  padding: 16px!important;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}
</style>
<script>


import GlobalHeader from "@/views/GlobalHeader.vue";

export default {
  components: {GlobalHeader},
  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'margin:0;')
  },
}
</script>